<style lang="less">
    @import '../../../styles/common.less';
    @import './article-publish.less';
    @import './env_data_manage.less';
</style>

<template>
    <div>
        <Row class="padding-left-10">
            <div class="topbar">
                <span>筛选: </span>
                <DatePicker class="datapicker"
                            placeholder="选择导出时间"
                            type="daterange"
                            confirm
                            placement="bottom-start"
                            @on-ok="filter"
                            format="yyyy-MM-dd"
                            @on-change="datePickerOnChange"
                            :options="options"
                ></DatePicker>
                <Button type="primary" size="small" @click="showTree=true">导出</Button>
            </div>
        </Row>
        <br>
        <Card>
            <Tabs @on-click="tabOnclick" v-model="currentType">
                <TabPane v-for="(item,index) in menuTreeData"
                         :label="item.title"
                         :key="index"
                         style="height:580px">
                    <Table border
                           v-if="showTable"
                           height="500"
                           :loading="loading"
                           :columns="item.children"
                           :ref="'table_'+index"
                           :data="allTableData[item.snode]"
                    ></Table>
                    <Page :total='dataTotal'
                          :page-size=limite
                          @on-change="onPageChange"
                          style="margin-top: 15px;margin-right: 5px;display: flex;justify-content: flex-end"></Page>
                </TabPane>
            </Tabs>
        </Card>

        <Modal v-model="showTree"
               title="筛选导出数据"
               @on-ok="ok"
               @on-cancel="cancel">
            <Card style="height: 300px;overflow-y: auto">
                <!--<div slot="title">-->
                <!--<Icon type="paper-airplane"></Icon>-->
                <!--农科院宁夏枸杞项目-环境监测站点-->
                <!--</div>-->
                <Scroll style="margin-top: -15px">
                    <Tree :data="menuTreeData" @on-select-change="onSelectChange" @on-check-change='onCheckChange'
                          show-checkbox multiple></Tree>
                </Scroll>
            </Card>

        </Modal>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>
<style>
    .ivu-scroll-container {
        overflow-y: auto !important;
    }

    .topbar {
        background-color: #fff;
        padding: 10px 5px;
        border-radius: 4px;
    }

    .datapicker {
        /*margin: 0 5px;*/
        width: 200px;
    }

    .echartsClass {
        width: 300px;
        height: 300px;
    }

    .ivu-tabs-nav-scroll {
        overflow: auto !important;
    }

</style>
<script>
    import tinymce from 'tinymce';
    import {getStationData} from '../../../api'
    import Cookies from 'js-cookie';
    import xlsx from 'better-xlsx'

    export default {
        data() {
            return {
                spinShow: false,//加载框
                datePickerValue: '',
                datePickerValueEnd: '',
                dataTotal: 0,//数据总数
                limite: 24,//每页展示的数据
                currentPage: [],//当前页码,每个tab 对应一个数组
                menuTreeData: [],
                checkTabItem: 0,//选中的tab

                ifShowEcharts: false,
                currentType: '0',//当前激活的tab
                showTree: false,//显示树状图
                currentTableData: [],//当前表格的数据
                snodes: [],//节点
                isFirstGet: true,//是否第一次请求
                loading: true,//加载
                allTableData: {},//所有数据
                showTable: true,//是否显示table
                totalNum: 0,//条目总数
                options: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                }
            };
        },
        methods: {
            onSelectChange: function (selectArrays) {
            },
            onCheckChange: function (checkItems) {
            },
            //tab点击
            tabOnclick: function (name) {
                this.checkTabItem = name;
                console.log("当前选中的tab", name)
                this.filter();
            },
            //显示图表
            showEcharts: function () {
                this.ifShowEcharts = !this.ifShowEcharts;
            },
            //是否显示tab
            //如果全都没有选中，则隐藏
            isShowTabPane: function (tabData) {
                tabData.children.forEach(function (item, index) {
                    if (item.checked) {
                        return true;
                    }
                })
                return false;
            },
            //获取数据
            getData: function (snode) {
                //todo 造假数据
//                switch (type) {
//                    //基本传感器
//                    case "baseSensor":
//                        return [
//                            {
//                                time: '2017-11-13 00:00',
//                                battery: '2221',
//                                solarPanels: '333',
//                                precipitation: '444',
//                                hostTemperature: '555',
//                                barometric: '666'
//                            },
//                            {
//                                time: '2017-11-13 01:00',
//                                battery: '2222',
//                                solarPanels: '333',
//                                precipitation: '444',
//                                hostTemperature: '555',
//                                barometric: '666'
//                            },
//                            {
//                                time: '2017-11-13 02:00',
//                                battery: '2223',
//                                solarPanels: '333',
//                                precipitation: '444',
//                                hostTemperature: '555',
//                                barometric: '666'
//                            },
//                            {
//                                time: '2017-11-13 03:00',
//                                battery: '2224',
//                                solarPanels: '333',
//                                precipitation: '444',
//                                hostTemperature: '555',
//                                barometric: '666'
//                            },
//                        ]
//                        break;
//                    //有线节点
//                    case "wiredNode":
//                        return [
//                            {
//                                time: '2017-11-13 00:00',
//                                airTemperature: '11',
//                                relativeHumidity: '22',
//                                effectivePhotosynthetic: '33',
//                                WindDirectionDavis: '44',
//                                UAIndex: '55',
//                                soilTemperature: '66',
//                                leafWetness: '77',
//                                voltage: '88',
//                            },
//                            {
//                                time: '2017-11-13 01:00',
//                                airTemperature: '12',
//                                relativeHumidity: '22',
//                                effectivePhotosynthetic: '33',
//                                WindDirectionDavis: '44',
//                                UAIndex: '55',
//                                soilTemperature: '66',
//                                leafWetness: '77',
//                                voltage: '88',
//                            },
//                            {
//                                time: '2017-11-13 02:00',
//                                airTemperature: '13',
//                                relativeHumidity: '22',
//                                effectivePhotosynthetic: '33',
//                                WindDirectionDavis: '44',
//                                UAIndex: '55',
//                                soilTemperature: '66',
//                                leafWetness: '77',
//                                voltage: '88',
//                            },
//                            {
//                                time: '2017-11-13 03:00',
//                                airTemperature: '14',
//                                relativeHumidity: '22',
//                                effectivePhotosynthetic: '33',
//                                WindDirectionDavis: '44',
//                                UAIndex: '55',
//                                soilTemperature: '66',
//                                leafWetness: '77',
//                                voltage: '88',
//                            },
//                            {
//                                time: '2017-11-13 04:00',
//                                airTemperature: '15',
//                                relativeHumidity: '22',
//                                effectivePhotosynthetic: '33',
//                                WindDirectionDavis: '44',
//                                UAIndex: '55',
//                                soilTemperature: '66',
//                                leafWetness: '77',
//                                voltage: '88',
//                            },
//                        ]
//                        break;
//                    //有线节点2
//                    case 'wiredNodeTwo':
//                        return [
//                            {
//                                time: '2017-11-13 00:00',
//                                airHumidity: '111A',
//                                relativeHumidity: '111B',
//                                windSpeed: "111C",
//                                windDirection: "111D",
//                                ultravioletIndex: "111E",
//                                solarRadiation: "111F",
//                                leafWetness: "111G",
//                                SDI12Voltage: "111H",
//                            },
//                            {
//                                time: '2017-11-13 01:00',
//                                airHumidity: '222A',
//                                relativeHumidity: '222B',
//                                windSpeed: "222C",
//                                windDirection: "222D",
//                                ultravioletIndex: "222E",
//                                solarRadiation: "222F",
//                                leafWetness: "222G",
//                                SDI12Voltage: "222H",
//                            },
//                            {
//                                time: '2017-11-13 02:00',
//                                airHumidity: 'A333',
//                                relativeHumidity: 'B333',
//                                windSpeed: "C333",
//                                windDirection: "D333",
//                                ultravioletIndex: "E333",
//                                solarRadiation: "F333",
//                                leafWetness: "G333",
//                                SDI12Voltage: "H333",
//                            }
//                        ]
//                        break;
//                    //无线节点1
//                    case "wirelessNodeOne":
//                        return [
//                            {
//                                time: '2017-11-13 00:00',
//                                WSNCell: '111A',
//                                soilMoisture50: '111B',
//                                soilMoisture20: "111C",
//                                soilTemperature20: "111D",
//                                leafWetness: "111E",
//                                LQI: "111E",
//                            },
//                            {
//                                time: '2017-11-13 10:00',
//                                WSNCell: '222A',
//                                soilMoisture50: '222B',
//                                soilMoisture20: "222C",
//                                soilTemperature20: "222D",
//                                leafWetness: "222E",
//                                LQI: "222E",
//                            },
//                            {
//                                time: '2017-11-13 20:00',
//                                WSNCell: '333A',
//                                soilMoisture50: '222B',
//                                soilMoisture20: "111C",
//                                soilTemperature20: "555D",
//                                leafWetness: "666E",
//                                LQI: "999E",
//                            }
//
//                        ]
//                        break;
//                    //无线节点2
//                    case "wirelessNodeTwo":
//                        return [
//                            {
//                                time: '2017-11-13 00:00',
//                                WSNCell: '111A',
//                                soilMoisture50: '111B',
//                                soilMoisture20: "111C",
//                                soilTemperature20: "111D",
//                                leafWetness: "111E",
//                                LQI: "111E",
//                            },
//                            {
//                                time: '2017-11-13 10:00',
//                                WSNCell: '222A',
//                                soilMoisture50: '222B',
//                                soilMoisture20: "222C",
//                                soilTemperature20: "222D",
//                                leafWetness: "222E",
//                                LQI: "222E",
//                            },
//                            {
//                                time: '2017-11-13 20:00',
//                                WSNCell: '333A',
//                                soilMoisture50: '222B',
//                                soilMoisture20: "111C",
//                                soilTemperature20: "555D",
//                                leafWetness: "666E",
//                                LQI: "999E",
//                            }
//
//                        ]
//                        break;
//                }
            },
            //导出
            ok: function () {
                this.spinShow = true;
                this.tableStyle();
            },


            //导出excel格式
            tableStyle: function () {
                var allColumns;
                var allDatas;
                let params = {
                    access_token: Cookies.get('access_token'),
                    dtFirst: this.datePickerValue + "T00:00:00",
                    dtEnd: this.datePickerValueEnd + "T23:59:59",
                    limit: 999999999999,
                    group: 1,
                }
                getStationData(params)
                    .then(res => {
                        allColumns = res.snodesList;
                        //获取表格数据
                        allDatas = res.data;
//                        console.log("res", res);
//                        console.log("请求回来的列", allColumns)
//                        console.log("请求的datas", allDatas)
                    })
                    .then(() => {
                        var file = new xlsx.File();
                        var _this = this;
                        this.snodes.forEach((item, index) => {
                            //生成每一个sheet
                            var sheet = file.addSheet(_this.menuTreeData[index].title.replace("：", ""));
                            var rowColumnsTitle = sheet.addRow();
                            //获取列名
                            var columns = [];
                            _this.menuTreeData[index].children.forEach((item, index) => {
                                columns.push(item)
                            })
                            //获取数据
                            var data = allDatas[item];
//                            console.log("当前sheet的数据类型", typeof(data))
//                            console.log("当前sheet的数据", data)
                            //表头关联关系
                            var temp = [];
                            //写表头
                            columns.forEach((item, index) => {
                                temp.push(item);
                                var key = item.key;
                                var checked = item.checked;
                                var title = item.title;
                                if (checked) {
                                    var cell = rowColumnsTitle.addCell();
                                    cell.value = title;
                                }
                            })
                            //写数据
                            data.forEach((item, index) => {
                                var row = sheet.addRow();
                                temp.forEach((currentRow, index) => {
                                    if (currentRow.checked) {
                                        var cell = row.addCell();
                                        cell.value = item[currentRow.key]
                                    }
                                })
                            })
                        })
                        //导出表
                        file.saveAs('blob')
                            .then(content => {
                                this.spinShow = false;
                                saveAs(content, "example.xlsx")
                            })

                    })
            },

            filter: function () {
                this.isFirstGet = true;//强制更新
                this.refrenshData(this.snodes[this.checkTabItem], this.datePickerValue + "T00:00:00", this.datePickerValueEnd + "T23:59:59")
            },
            datePickerOnChange: function (valueArray) {
                this.datePickerValue = valueArray[0];
                this.datePickerValueEnd = valueArray[1];
            },

            //取消
            cancel: function () {

            },
            //刷新数据
            refrenshData: function (snode, dtFirst, dtEnd) {
                this.loading = true;
                let params = {
                    access_token: Cookies.get('access_token'),
                    snode: snode,
                    dtFirst: dtFirst,
                    dtEnd: dtEnd,
                    limit: this.limite,
                    group: this.currentPage[this.checkTabItem] ? this.currentPage[this.checkTabItem] : 1,
                }
                getStationData(params)
                    .then(res => {
                        this.menuTreeData = res.snodesList;
                        //保存节点
                        this.snodes = [];
                        var _this = this;
                        this.menuTreeData.forEach((item, index) => {
                            _this.snodes.push(item.snode)
                        });
                        //获取表格数据
                        this.allTableData = {};
                        this.allTableData = res.data;
                        //存储总数
                        this.dataTotal = res.data_count;

                        //取消加载
                        this.loading = false;
                    })
                    .catch(err => {
                        this.loading = false;
                    })
            },
            //页码切换
            onPageChange: function (page) {
                console.log("页码", page)
                this.currentPage[this.checkTabItem] = page;
                this.filter();
            }
        },
        created() {
            this.currentType = this.$route.query.type;
            this.checkTabItem = this.currentType ? this.currentType : 0;
            this.refrenshData(0)
        }
    };
</script>
